CSS - How CSS works [Study Notes]

This series is the study note of the Advanced CSS couse. This article will introduce how CSS works behind the scene. Including how the mechanism resolves the conflicting CSS codes, and how the final CSS values are parsed.

Basic Knowledge

Different Entities

There are three different entities affecting the CSS code. Author, User and Browser.
Author: the author of the original CSS code.
User: people who see the page on browser, can modify the CSS using front-end tools, such as Chrome developer tools.
Browser: The browser itself has its own oginal way of rendering the page using some CSS properties.

Resolve Conflicts

There are three steps to do to resolve the conflicts in CSS codes.

Importance

First, it will check the importance of the declaration. The importance basic means how the code has been marked as important. There are normal declaration, and the declaration with the !important, like background-color: blue !important;. Also as introduced in the previous section, there are three different entities who can affect the CSS codes. The importance of the declaration, from the least to the most are in the order of:

1. Default browser declarations
   The default browser declarations is just the foundation CSS code that the necessary for the browser to render the content properly. It can be easily overrided.
2. User declaration
   User’s normal declaration using the front-end tools will always override the browser’s default settings.
3. Author declarations
   User cannot override the properties that have valued defined by author’s code using the front-end tools.
4. Author !important declarations
5. User !important declarations
   But if user add !important in the declaration, it gives the code the highest priority in importance.

Specificity

If the conflicting declarations have the same importance, it will check the specificity of them. The more specific the declaration is, the higher priority will be given. From the least to the most specific declarations are in the order of:

1. Elements, pseudo-elements

   a {
       background-color: red;
   }

The declaration for the background-color here is for all the elements a. It has the least specifity.

1. Classes, pseudo-classes, attribute

   .class {
       background-color: yellow;
   }

Here the declaration is for all the classes with the class name as “class”.

1. IDs

   #id {
       background-color: blue;
   }
   Here is a declaration for the element with ID "id".
   1. Inline styles

A

If the CSS code has been written in the html code, it's the inline style and has the highest priority.

### Example

.button { //(inline:0, id:0, class:1, element:0)
background-color: red;
}
nav#nav div.div .button { //(inline:0, id:1, class:2, element:2)
background-color: yellow;
}
a { //(inline:0, id:0, class:0, element:1)
background-color: blue;
}

#nav a .button:hover { //(inline:0, id:1, class:2, element:1)
background-color: green;
}
```
In this case the second line will win the game!

Source order

If the conflicting declarations have same importance and specificity, the one in the latest section will be chosen and override the codes before.

Process Values

This section will introduce how the values bare processed step by step by the browser.

1. Declared value
   The browser will first search for author declaration for the property, and get all the related values.
2. Cascaded value
   Then it will follow the rules introduced in the previous section, to get the actual value from the declaration.
3. Specified value
   This is the default value for the property if no author declarations found.
4. Computed value
   This step is for computing the relative value into actual values.
5. Used value
   This step is for the final calculation based on the layout.
6. Actual value
   This step will apply the restrictions of the browser and device into the values, then get teh final actual value.

How to turn relative values into absolute

Inhiritance